<template>
  <div class="login-container">
   
    <el-form
      :model="form"
      status-icon
      :rules="rules"
      ref="form"
      label-width="80px"
      class="login-form"
    >
    <h1 class="login-title">登录页面</h1>
      <el-form-item label="账号" prop="username">
        <el-input
          v-model="form.username"
          placeholder="请输入账号"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="form.password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="login-buton" type="primary" @click="onSubmit('form')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {login} from '@/api/login'
  import memoryUtils from '@/utils/memoryUtils'
  import storageUtils from '@/utils/storageUtils';
export default {
  data() {
    var validateUserName = (rule, value, callback) => {
      value = value.trim()
      const length = value && value.length
      const pwdReg=/^[a-zA-Z0-9_]+$/
        if (value === '') {
          callback(new Error('请输入账号'));
        } else if (length <=4||length>12) {
          callback(new Error('账号长度应在4~12位之间'));
        } else if(!pwdReg.test(value)) {
          callback(new Error('账号组成只能包含英文数字或下划线'));
        } else{
          callback()
        }
      };
    return {
        form:{
            username:'',
            password:''
        },
        rules:{
          username:[
            {
              required:true,validator: validateUserName, trigger: ['blur','change' ]
            }
          ],
          password:[
            {
              required:true,message:'请输入密码', trigger: ['blur','change' ]
            }
          ]
        }
    };
  },

  components: {},

  methods: {
    onSubmit(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            // alert(this.form.username,this.form.password);
            // console.log(this.form.username,this.form.password);
            // login(this.form.username,this.form.password)
            let result= await login(this.form.username,this.form.password);
            result = result.data;
            if(result.status == 0){
              this.$message({
                message:"欢迎回来 Master",
                type:"success"
              });
              const user =result.data
              storageUtils.saveUser(user)
              memoryUtils.user = user
              this.$router.replace('/')
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }

};
</script>

<style scoped>
  .login-container{
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../../assets/1.jpg');
    overflow: hidden;
  }
  .login-form{
    width: 350px;
    margin: 160px auto;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 30px;
    border-radius: 20px;
  }
  .login-title{
    text-align: center;
  }
  .login-buton{
    margin-left: 40px;
    width: 120px;
  }
</style>